<template>
	<view class="taskroom">
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :top='$store.state.statusBarHeight'
			:up="upOption" :down="downOption">
			<view class="box-scroll">
				<image src="../../static/img/tasklist.png" mode="widthFix"></image>
			</view>
			<view class="box-scroll">
				<scroll-view scroll-x='true' class="scroll-diy-uni" :scroll-with-animation='true' :scroll-into-view = "'i' + id" :id="'i' + id">
					<view class="item" :style="{
						'background':current == index ? '#FF6F30' : '',
						'color':current == index ? '#fff' : ''
					}" @click="setData(item.id,index)" v-for="(item,index) in taskTypeList">{{item.title}}</view>
				</scroll-view>
			</view>
			<diyTask :taskSwitch='false' :taskList="taskList"></diyTask>
		</mescroll-body>
		<diyTabBar value="taskroom"></diyTabBar>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import diyTask from '../../component/diy-task/diy-task.vue'
	import diyTabBar from '../../component/diy-nav/diy-tabbar.vue'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			diyTabBar,
			diyTask,diyNavBar
		},
		data() {
			return {
				current:0,
				taskList: [], //展示的数据
				upOption: {
					page: {
						num: 0,
						size: 10
					}
				}, //上拉参数配置
				downOption: {
					page: {
						num: 0,
						size: 10
					}
				}, //下拉参数配置
				taskTypeList:[],
				id:null
			}
		},
		onLoad(option) {
			this.getinfo()
			//#ifdef APP
			uni.hideTabBar()
			//#endif
		},
		onShow() {},
		methods: {
			// 下拉刷新
			downCallback(page) {
				if(this.mescroll) this.mescroll.resetUpScroll()
			},
			//上拉加载
			upCallback(page) {
				this.$http.sendrequest('/task/TaskList', {
					page: page.num,
					page_size: page.size,
					task_sort_id:this.id || ''
				}).then(res => {
					if (res.code == 1) {
						if (page.num == 1) this.taskList = []; //如果是第一页需手动制空列表
						this.taskList = this.taskList.concat(res.data.list);
						if(this.mescroll) this.mescroll.endBySize(res.data.list.length, res.data.count);
					}
				})
			},
			setData(id,index){
				this.id = id;
				this.current = index;
				if(this.mescroll) this.mescroll.resetUpScroll()
			},
			getinfo(){
				this.$http.sendrequest('/task/TaskSortList').then(res=>{
					this.taskTypeList = res.data;
					this.id = this.taskTypeList[0].id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.taskroom{
		background: #f7f7f7;
		.box-scroll{
			background: #fff;
			min-height: 90rpx;
			margin-bottom: 20rpx;
			padding:10rpx;
			display: flex;
			align-items: center;
			image{
				width: 100%;
			}
			.scroll-diy-uni{
				display: flex;
				align-items: center;
				white-space: nowrap;
				padding: 0 30rpx;
				box-sizing: border-box;
				.item{
					font-size: 24rpx;
					position: relative;
					display: inline-block;
					width: auto !important;
					// height: 48rpx;
					padding:0 10rpx 2rpx;
					border-radius: 6rpx;
					margin-right: 20rpx;
					line-height: 48rpx;
				}
				// .item::after{
				// 	content: '';
				// 	height: 6rpx;
				// 	width: 140%;
				// 	position: absolute;
				// 	left: 50%;
				// 	transform: translateX(-50%);
				// 	bottom: 0;
				// 	border-radius: 6rpx;
				// 	background: #FF6F30;
				// }
			}
		}
	}

</style>